<%@ page import="BookManagement.domain.User" %><%--
  Created by IntelliJ IDEA.
  User: 86135
  Date: 2023/3/28
  Time: 17:14
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人资料修改</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/css/pay.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/semantic.min.css">
    <script src="${pageContext.request.contextPath}/statics/js/semantic.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script language="JavaScript">
        function pay1(){
            document.getElementById('pay').style.display="";
            document.getElementById('payInput').style.display="";
        }

        function pay2(){
            var money = $("#money").val();
            if(money != ""){
                $("#num").html(money);
                document.getElementById('payInput').style.display="none";
                document.getElementById('pay').style.display="";
                document.getElementById('payIMG').style.display="";
            } else {
                alert("请输入充值金额！")
            }

        }

        function pay3(){
            var money = $("#money").val();
            var XHR = new XMLHttpRequest();
            var FD  = new FormData();
            FD.append("money",money);
            XHR.open('POST', "${pageContext.request.contextPath}/purchase/prepaidBalance");
            XHR.send(FD);
        }

        function hid(){
            document.getElementById('pay').style.display="none";
            document.getElementById('payInput').style.display="none";
            document.getElementById('payIMG').style.display="none";
        }

        function clearNoNum(obj) {
            obj.value = obj.value.replace(/[^\d.]/g, "");    //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^0/g, "");       //验证第一个字符不是0
            obj.value = obj.value.replace(/^\./g, "");      //验证第一个字符是数字而不是.
            obj.value = obj.value.replace(/\.{2,}/g, ".");  //只保留第一个'.'清除多余的'.'
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");   //保证'.'只出现一次'.'而不能出现两次以上
        }
    </script>
    <style>
        body{
            background-image: url("${pageContext.request.contextPath}/statics/images/bg.png");
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>个人资料修改</small>
                </h1>
            </div>
        </div>
    </div>
    <br>
    <form id="item" enctype="multipart/form-data">
        <div align="center">
            头像更新：<input type="file" name="photo" title="点击上传头像" style="width: 20%;margin-left: auto;margin-right: auto"/><br>
            <%--显示头像--%>
            <img src="${pageContext.request.contextPath}/user/readPhoto?username=${user.getUserName()}" width="80px" height="80px"  ><br><br>
            帐号：${user.getUserName()} <br><br>
            <input type="hidden" name="username" value="${user.getUserName()}"/>
            昵称：<input type="text" name="name" value="${user.getName()==null?"":user.getName()}" style="border-radius: 5px;"/><br><br>
            性别：
            <input name="sex" type="radio" value="男" <% if (session.getAttribute("sex")==null || ((String)session.getAttribute("sex")).equals("男")){%>
                   checked="checked" <%}%> />男
            <input name="sex" type="radio" value="女" <% if (session.getAttribute("sex")!=null && ((String)session.getAttribute("sex")).equals("女")){%>
                   checked="checked" <%}%> />女<br><br>
            生日：<input type="date" name="birth" value="${user.getBirth()==null?"":user.getBirth()}" style="border-radius: 5px;"/><br><br>
            个性签名：<input type="text" name="signature" value="${user.getSignature()==null?"":user.getSignature()}" style="border-radius: 5px;"/><br><br>
        </div>
    </form>
    <div align="center">
        余额：${user.getBalance()} <button onclick="pay1()" style="">充值</button><br><br>
        积分：${user.getPoint()} <br><br>
        <form method="post" action="${pageContext.request.contextPath}/user/updateCredit" style="">
            信誉：${user.getCredit()}(每100分可升一级，ABCDE五个等级对应借书数分别为10、5、3、1、0)
            <button type="submit" style="">升级</button>
        </form><br>
        <a href="${pageContext.request.contextPath}/spend/browseRecordByUser" title="点击查看明细">消费记录</a> <br><br>
        <a href="${pageContext.request.contextPath}/user/showBorrowByUser" title="点击查看">
            已借：${user.getBorrowNum()} 本</a> <br><br>
        <a href="${pageContext.request.contextPath}/purchase/showPurchaseByUser" title="点击查看">
            已购：${user.getPurchaseNum()} 本</a> <br><br>
    </div>

    <input type="button" value="提交" onclick="upload()" class="ui primary button" style="margin-left: 40%"/>
    <input type="button" value="返回" onclick="Return()" class="ui toggle button"style="margin-left: 7%"/>

    <script>
        function upload(){
            var item = new FormData(document.getElementById("item"));
                $.post({
                    url:"${pageContext.request.contextPath}/account/updateAccount",
                    data:item,
                    processData:false,
                    contentType:false,
                });
            sleep(100).then(() => {
                alert("修改成功！");
                window.location = "${pageContext.request.contextPath}/user/index";
            })
        }

        //改良setTimeout()函数
        function sleep (time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }

        function Return(){
            window.location = "${pageContext.request.contextPath}/user/index"
        }
    </script>

    <!--支付界面弹窗显示-->
    <div class="pay" id='pay'>
        <div align="center" class="popup">
            <div id="header" class="ui-icon-circle-check">
                <div>
                    <form id="payInput">
                        <br><br><br><br><br><br><br>
                        <tr>
                            <td align="right">金额：</td>
                            <td>
                                <input type="text" name="money" id="money" onkeyup="clearNoNum(money)" style="border-radius: 5px;">
                            </td>
                        </tr>
                        <br><br><br><br>
                        <button type="button" onclick="pay2()" class="ui primary button">确认充值</button>
                    </form>
                </div>
                <form id="payIMG">
                    <br><h3>请支付 <span id="num"></span> 元</h3>
                    <a href="${pageContext.request.contextPath}/purchase/paySuccessfully" onclick="pay3()"><img src="${pageContext.request.contextPath}/purchase/readPayPhoto" style="width: 300px;height: 300px;"></a>
                </form>
                <div id="header-right" onclick="hid()" style="line-height: 20px;cursor: pointer;">x</div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('pay').style.display="none";
        document.getElementById('payInput').style.display="none";
        document.getElementById('payIMG').style.display="none";
    </script>
</div>